<!--
 * @Author: your name
 * @Date: 2020-07-01 21:50:36
 * @LastEditTime: 2020-07-03 23:17:27
 * @LastEditors: Please set LastEditors
 * @Description: 移动web适配方案笔记
 * @FilePath: \移动web\MobileWeb\day1\jdM\demo\03-适配方案.html
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> -->
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height:500px;
            background: pink;
        }
        /* 
        流式布局：就是百分比布局，非固定像素，内容向两侧填充，
        理解成流动的布局，称为流式布局
        视觉窗口：viewport，是移动端特有。这是一个虚拟的区域，
        承载网页的。
            承载关系：浏览器=====》viewport====》网页
        适配要求：
            1.网页宽度必须和浏览器保持一致
            2.默认显示的缩放比例和PC端保持（缩放比例1.0）
            3.不允许用户自行缩放网页
            满足这些要求达到了适配，国际上通用的适配方案，标准的
            移动端适配方案。
        适配设置：
            如果任何设置都没有，默认走的就是viewport的默认设置
            去设置新的viewport设置，达到适配要求。
            <meta name="viewport">设置视口的标签 在head里面
            并且应该紧接着编码设置
            viewport的功能：
            1.width     可以设置宽度    （device-width  当前设备
            的宽度）
            2.height    可以设置高度
            3.initial-scale     可以设置默认的缩放比例
            4.user-scalable     可以设置是否允许用户自行缩放
            5.maximum-scale     可以设置最大缩放比例
            6.minimum-scale     可以设置最小缩放比例
            在<meta name="viewport" content=""> content=""
            使用以上参数
            1.width=device-width    宽度跟浏览器（当前设备）保持一致
            2.initial-scale=1.0     宽度一致（跟pc端）比例是1.0
            3.user-scalable=no      不允许用户自行缩放（yes，
            no  1，0）
            标准适配方案：
            <meta name="viewport" content="width=device-width,
            initial-scale=1.0,user-scalable=0">
            meta:vp + tab 快捷方式        
         */
    </style>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"> -->
</head>
<body>
<div class="box">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>